<template>
  <div>
    <t-dialog :show="dialogVisible" @hide="() => {
      dialogVisible = false;
    }
      " @show="() => {
        dialogVisible = true;
      }
        " class="RtAddPortletHelper" position="right" :maximized="true" ref="drawer" style="max-width: 100%; ">
      <div :style="($q.screen.xs || $q.platform.is.mobile)?'100vw':'width: 400px'">
        <div class="header">
          <p class="title">
            {{ title }}
          </p>
          <!-- 20240905屏蔽业务主题 -->
          <p class="operate" style="display:none">
            <span style="margin-right: 10px">
              {{ themeName ? themeName : Terms.portalList.all }}
            </span>
            <svg @click="choiseTheme = true" t="1694774141728" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="4785" width="14" height="14">
              <path fill="var(--t-color)"
                d="M66.488889 211.781818h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485 0-27.397172-22.768485-49.648485-50.980202-49.648485H66.488889C38.341818 112.484848 15.508687 134.723232 15.508687 162.133333s22.833131 49.648485 50.980202 49.648485z m891.009293 248.242424H66.488889C38.277172 460.024242 15.508687 482.262626 15.508687 509.672727s22.768485 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.410101-22.923636-49.648485-50.993131-49.648485z m0 351.63798H66.488889c-28.134141 0-50.980202 22.238384-50.980202 49.648485s22.833131 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.397172-22.781414-49.648485-50.993131-49.648485z m0 0"
                p-id="4786"></path>
            </svg>
            <!-- <i class="el-icon-s-operation" @click="choiseTheme = true"></i> -->
          </p>
        </div>
        <div style="width: 100%; height: calc(100vh - 118px)">
          <div class="content" style="padding: 0 20px; padding-bottom: 10px">
            <!-- 搜索 -->
            <div class="searchs">
              <i class="el-icon-search fas dx-icon icon-t-zoom"></i>
              <input textAlign='left'
              borderType='borderless' type="text" :placeholder="Terms.portalList.placehold" v-model="filterKey"  />
              <i v-show="filterKey" class="fas dx-icon icon-t-close-circle" @click="filterKey = ''"
                style="margin-right: 10px; cursor: pointer"></i>
              <i v-show="!filterKey" class="fas dx-icon icon-t-close-circle"
                style="margin-right: 10px; cursor: pointer; opacity: 0"></i>
            </div>
            <!-- 标签 -->
            <div class="tags">
              <span @click="categoriesClick()" class="tag"
                :class="Categories && categories.every(i => Categories.some(jj => jj == i.Code)) ? 'isCheck' : ''">
                {{ Terms.portalList.all }}
                <i class="count" v-if="ComputedTotal > 0" style="font-size: 12px">({{ ComputedTotal }})</i>
                <span v-if="Categories && categories.every(i => Categories.some(jj => jj == i.Code))" class="filterIcon"
                  style="">
                  <svg fill="currentColor" class="web-Icon_primary" data-name="图层 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 14 14">
                    <path
                      d="M0,14H13.57a.4.4,0,0,0,.4-.4L14,0ZM13,8.37,9.21,12.14a.47.47,0,0,1-.66,0L6.33,10a.48.48,0,0,1,0-.67.46.46,0,0,1,.67,0l1.88,1.88,3.44-3.43a.47.47,0,0,1,.53,0A.48.48,0,0,1,13,8.37Z">

                    </path>
                  </svg>
                </span>
              </span>
              <span class="tag" :class="Categories && Categories.some(jj => jj == i.Code)
                ? 'isCheck'
                : ''
                " v-for="i in $q.screen.xs ? categories.slice(0, 2) : categories.slice(0, 2)" :key="i.Name"
                :title="i.Name" @click="categoriesClick(i)">
                {{ i.Name }}
                <i class="count" v-if="i.Total > 0">
                  ({{ i.Total }})</i>
                <span v-if="Categories && Categories.some(jj => jj == i.Code)" class="filterIcon" style="">
                  <svg fill="currentColor" class="web-Icon_primary" data-name="图层 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 14 14">
                    <path
                      d="M0,14H13.57a.4.4,0,0,0,.4-.4L14,0ZM13,8.37,9.21,12.14a.47.47,0,0,1-.66,0L6.33,10a.48.48,0,0,1,0-.67.46.46,0,0,1,.67,0l1.88,1.88,3.44-3.43a.47.47,0,0,1,.53,0A.48.48,0,0,1,13,8.37Z">

                    </path>
                  </svg>
                </span>

              </span>
              <span style="position: relative;top:10px" v-if="categories.length>3">
                <i class="fas dx-icon icon-t-more" style="position: relative;top:-10px">

                </i>
                <t-menu class="RtAddPortletHelper">
                  <div class="tags" style="display: flex">
                    <span class="tag" :class="Categories && Categories.some(jj => jj == i.Code)
                      ? 'isCheck'
                      : ''
                      " v-for="i in $q.screen.xs ? categories.slice(2) : categories.slice(2)" :key="i.Name" :title="i.Name" @click="categoriesClick(i)">
                      {{ i.Name }}
                      <i class="count" v-if="i.Total > 0">({{ i.Total }})</i>
                      <span v-if="Categories && Categories.some(jj => jj == i.Code)" class="filterIcon" style="">
                        <svg fill="currentColor" class="web-Icon_primary" data-name="图层 1"
                          xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                          <path
                            d="M0,14H13.57a.4.4,0,0,0,.4-.4L14,0ZM13,8.37,9.21,12.14a.47.47,0,0,1-.66,0L6.33,10a.48.48,0,0,1,0-.67.46.46,0,0,1,.67,0l1.88,1.88,3.44-3.43a.47.47,0,0,1,.53,0A.48.48,0,0,1,13,8.37Z">

                          </path>
                        </svg>
                      </span>
                    </span>
                  </div>
                </t-menu>
              </span>

            </div>
          </div>
          <div v-if="!isSearch" style="height: calc(100vh - 200px); overflow: auto" @scroll="ScrollChange">
            <!-- 推荐 -->
            <div class="recommend" v-show="!isSearch">
              <tm-tabs v-model="activeName" forcedPc inline-label style="margin-bottom: 15px;" :staticItems="[
                { label: Terms.portal.hot, code: 'hot' },
                {
                  label: Terms.portal.new,
                  code: 'new',
                },
              ]">
                <q-tab-panel name="hot"> </q-tab-panel>
                <q-tab-panel name="new"> </q-tab-panel>
              </tm-tabs>
              <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                  v-if="hotList.length"
                  :label="Terms.portal.hot"
                  name="hot"
                >
                </el-tab-pane>
                <el-tab-pane
                  v-if="newList.length"
                  :label="Terms.portal.new"
                  name="new"
                >
                </el-tab-pane>
              </el-tabs> -->
              <t-carousel v-model="slide" transition-prev="scale" transition-next="scale" swipeable animated
                control-color="#f0f2f5" navigation padding arrows height="280px"
                v-if="activeName == '0' && hotList.length > 0">
                <t-carousel-slide v-for="j in hotList.length / 2" :key="j" :name="j">
                  <div v-for="i in 2" class="box-card recommend_portlet" :class="checkList.some(
                    jj => jj.ID == hotList[(j - 1) * 2 + (i - 1)].ID,
                  )
                    ? 'ischecked'
                    : ''
                    ">
                    <div style="height: 100%; width: 100%" @click="checkProtle(hotList[(j - 1) * 2 + (i - 1)])"
                      v-if="hotList[(j - 1) * 2 + (i - 1)]">
                      <p class="thumbnail">
                        <img :src="hotList[(j - 1) * 2 + (i - 1)].Thumbnail
                          ? hotList[(j - 1) * 2 + (i - 1)].Thumbnail
                          : defaultImg
                          " alt="" />
                      </p>
                      <p class="title" :title="hotList[(j - 1) * 2 + (i - 1)].Name">
                        {{ hotList[(j - 1) * 2 + (i - 1)].Name }}
                        <!-- {{hotList[j*2+i].Name}} -->
                      </p>
                      <p class="subTitle">
                        <span :title="hotList[(j - 1) * 2 + (i - 1)].TopicName">
                          {{ hotList[(j - 1) * 2 + (i - 1)].TopicName }}
                        </span>
                        <span>
                          <i class="t-subscribe-line"></i>
                          {{ hotList[(j - 1) * 2 + (i - 1)].UseCount }}
                        </span>
                      </p>
                      <p class="des" :title="hotList[(j - 1) * 2 + (i - 1)].Description">
                        {{ hotList[(j - 1) * 2 + (i - 1)].Description }}
                      </p>
                      <div :class="checkList.some(
                        jj => jj.ID == hotList[(j - 1) * 2 + (i - 1)].ID,
                      )
                        ? 'ischeckIcon'
                        : 'isvisiable'
                        ">
                        <i class="fas dx-icon icon-t-check"></i>
                      </div>
                      <span class="view" @click.stop="preview(hotList[(j - 1) * 2 + (i - 1)])">
                        {{ Terms.portalList.preview }}
                      </span>
                    </div>
                  </div>
                </t-carousel-slide>
              </t-carousel>
              <t-carousel v-model="slide" transition-prev="scale" transition-next="scale" swipeable animated
                control-color="#f0f2f5" navigation padding arrows height="280px"
                v-if="activeName == '1' && newList.length > 0">
                <t-carousel-slide v-for="j in newList.length / 2" :key="j" :name="j">
                  <div v-for="i in 2" class="box-card recommend_portlet" :class="checkList.some(
                    jj => jj.ID == newList[(j - 1) * 2 + (i - 1)].ID,
                  )
                    ? 'ischecked'
                    : ''
                    ">
                    <div style="height: 100%; width: 100%" @click="checkProtle(newList[(j - 1) * 2 + (i - 1)])"
                      v-if="newList[(j - 1) * 2 + (i - 1)]">
                      <p class="thumbnail">
                        <img :src="newList[(j - 1) * 2 + (i - 1)].Thumbnail
                          ? newList[(j - 1) * 2 + (i - 1)].Thumbnail
                          : defaultImg
                          " alt="" />
                      </p>
                      <p class="title" :title="newList[(j - 1) * 2 + (i - 1)].Name">
                        {{ newList[(j - 1) * 2 + (i - 1)].Name }}
                        <!-- {{hotList[j*2+i].Name}} -->
                      </p>
                      <p class="subTitle" :title="newList[(j - 1) * 2 + (i - 1)].TopicName">
                        <span>
                          {{ newList[(j - 1) * 2 + (i - 1)].TopicName }}
                        </span>
                        <span>
                          <!-- <i class="el-icon-copy-document"></i>
                          {{ newList[(j - 1) * 2 + (i - 1)].UseCount }} -->
                        </span>
                      </p>
                      <p class="des" :title="newList[(j - 1) * 2 + (i - 1)].Description">
                        {{ newList[(j - 1) * 2 + (i - 1)].Description }}
                      </p>
                      <div :class="checkList.some(
                        jj => jj.ID == newList[(j - 1) * 2 + (i - 1)].ID,
                      )
                        ? 'ischeckIcon'
                        : 'isvisiable'
                        ">
                        <i class="fas dx-icon icon-t-check"></i>
                      </div>
                      <span class="view" @click.stop="preview(newList[(j - 1) * 2 + (i - 1)])">
                        {{ Terms.portalList.preview }}
                      </span>
                    </div>
                  </div>
                </t-carousel-slide>
              </t-carousel>
            </div>
            <!-- 列表 -->
            <div class="portalList">
              <!-- <header>
                {{ Terms.portalList.all }}
              </header> -->
              <div class="portalGroup" v-for="(j, index) in portalList" :key="index">
                <span class="title">
                  {{ index }}
                </span>
                <div class="portal" v-for="i in j" :key="i" :class="checkList.some(jj => jj.ID == i.ID) ? 'ischecked' : ''
                  " @click="checkProtle(i)">
                  <div class="abbreviation">
                    <img :src="i.Thumbnail ? i.Thumbnail : defaultImg" alt="" />
                  </div>
                  <div class="content">
                    <p class="title" :title="i.Name" style="-webkit-line-clamp: 2 !important;">
                      {{ i.Name }}
                    </p>
                    <p class="subTitle" :title="i.TopicName">
                      <span>
                        {{ i.TopicName }}
                      </span>
                      <span>
                        <!-- <i class="el-icon-copy-document"></i> {{ i.UseCount }} -->
                      </span>
                    </p>
                    <p class="des" :title="i.Description">
                      {{ i.Description }}
                    </p>
                  </div>
                  <div :class="checkList.some(jj => jj.ID == i.ID)
                    ? 'ischeckIcon'
                    : 'isvisiable'
                    ">
                    <i class="fas dx-icon icon-t-check"></i>
                  </div>
                  <span class="view" @click.stop="preview(i)">
                    {{ Terms.portalList.preview }}
                  </span>
                </div>
              </div>
              <!-- <el-empty
                v-if="Object.keys(portalList).length == 0"
                :description="Terms.portalList.noData"
              ></el-empty> -->
            </div>
          </div>

          <div v-else class="portalList" style="margin-top: 0px; height: calc(100vh - 230px); overflow: auto"
            @scroll="ScrollChange">
            <div class="portalGroup" v-for="(j, index) in portalList">
              <div class="portal" v-for="i in j" :class="checkList.some(jj => jj.ID == i.ID) ? 'ischecked' : ''"
                @click="checkProtle(i)">
                <div class="abbreviation">
                  <img :src="i.Thumbnail ? i.Thumbnail : defaultImg" alt="" />
                </div>
                <div class="content">
                  <p class="title" :title="i.Name">
                    {{ i.Name }}
                  </p>
                  <p class="subTitle" :title="i.TopicName">
                    <span>
                      {{ i.TopicName }}
                    </span>
                    <span>
                      <!-- <i class="el-icon-copy-document"></i> {{ i.UseCount }} -->
                    </span>
                  </p>
                  <p class="des" :title="i.Description">
                    {{ i.Description }}
                  </p>
                </div>
                <div :class="checkList.some(jj => jj.ID == i.ID)
                  ? 'ischeckIcon'
                  : 'isvisiable'
                  ">
                  <i class="fas dx-icon icon-t-check"></i>
                </div>
                <span class="view" @click.stop="preview(i)">
                  {{ Terms.portalList.preview }}
                </span>
              </div>
            </div>
            <!-- <el-empty
              v-if="Object.keys(portalList).length == 0"
              :description="Terms.portalList.noData"
            ></el-empty> -->
          </div>
        </div>
        <p style="
            display: flex;
            gap: 12px;
            padding: 10px !important;
            align-items: center;
            justify-content: end;
            width: 100%;
            margin: 0;
          ">
          <t-button @click="dialogVisible = false; visiblePortletsPreview = false" style="
              color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
              border: 1px solid #dcdcdc;
              padding: 8px 6px;
            ">{{ Terms.portal.cancel }}</t-button>
          <t-button v-if="!computedIsMetrics" type="primary" @click="sureData" class="tr-button-primary">{{
            Terms.portal.confirm }}</t-button>
          <t-button v-else :disabled="this.checkList.length == 0" type="primary"
            @click="choiseIcatorPortletVisible = true" class="tr-button-primary">下一步</t-button>
        </p>
      </div>
    </t-dialog>
    <t-dialog :show="choiseIcatorPortletVisible" @hide="() => {
      choiseIcatorPortletVisible = false;
    }
      " @show="() => {
        choiseIcatorPortletVisible = true;
      }
        " class="RtAddPortletHelper" position="right" :maximized="true" ref="drawer" style="max-width: 100%; ">
      <div :style="($q.screen.xs || $q.platform.is.mobile)?'100vw':'width: 400px'">
        <div class="header">
          <p class="title">
            {{ $q.lang.portal.choiseMerics }}
          </p>
        </div>
        <div style="width: 100%; height: calc(100vh - 102px)">
          <div class="portalList" style="margin-top: 0px; height: calc(100vh - 110px); overflow: auto">
            <div class="portalGroup">
              <div class="portal" v-for="i in checkList">
                <div class="abbreviation">
                  <img :src="i.Thumbnail ? i.Thumbnail : defaultImg" alt="" />
                </div>
                <div class="content">
                  <p class="title" :title="i.Name">
                    {{ i.Name }}
                  </p>
                  <p class="subTitle" :title="i.TopicName">
                    <span>
                      {{ i.TopicName }}
                    </span>
                    <span>
                      <!-- <i class="el-icon-copy-document"></i> {{ i.UseCount }} -->
                    </span>
                  </p>
                  <p class="des" :title="i.Description">
                    {{ i.Description }}
                  </p>
                </div>

                <span class="view" @click.stop="preview(i)">
                  {{ Terms.portalList.preview }}
                </span>
              </div>
            </div>
            <t-input style="    padding: 16px 20px 0px 20px;" :label="$q.lang.portal.title" labelPosition="top" class='tr-input-form'
              v-model="Title"></t-input>
            <UI_MetricsSet v-if="dialogVisible" style="padding:16px 20px 0 20px;" ref="UI_MetricsSet" @setTitle="setTitle" :portletCode="checkList[0].Code" :PortletBusinessType="checkList[0].PortletBusinessType" ></UI_MetricsSet>

          </div>
        </div>
        <p style="
            display: flex;
            gap: 12px;
            padding: 10px !important;
            align-items: center;
            justify-content: end;
            width: 100%;
            margin: 0;
          ">
          <t-button @click="dialogVisible = false; visiblePortletsPreview = false; choiseIcatorPortletVisible = false"
            style="
              color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
              border: 1px solid #dcdcdc;
              padding: 8px 6px;
            ">{{ Terms.portal.cancel }}</t-button>
          <t-button @click="choiseIcatorPortletVisible = false" style="
              color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
              border: 1px solid #dcdcdc;
              padding: 8px 6px;
            ">上一步</t-button>

          <t-button type="primary" @click="sureData" class="tr-button-primary">确定</t-button>
        </p>
      </div>
    </t-dialog>
    <TreeHelper :visible="choiseTheme" @update:visible="(e) => { choiseTheme = e }" @confirm="confirmChoiseTheme"
      :search="QueryData" />

    <div v-if="visiblePortletsPreview" @click="visiblePortletsPreview = false"
      style="position:fixed;left: 0;right: 0;bottom: 0 ;top: 0;right: 400px;z-index:9999">
      <img @click.stop="() => {

      }" :style="{ opacity: !isLoadPortlets ? '1' : '0' }" v-if="visiblePortletsPreview" id="PortletsPreview"
        :src="PortletsPreview" frameborder="0" style="
          z-index: 1000000;
          position: fixed;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        " />
    </div>
    <portlets-helper ref="portletsHelper" @sureData="portletsHelperSureData"></portlets-helper>
  </div>
</template>

<script>

import TDialog from 't/basic/dialog';
import TButton from 't/basic/button';
import PortletsHelper from './PortletsHelper.vue';
import { MixinsPortal } from './mixins_portal';
import { Terms } from './lib/Term';
import TreeHelper from './TreeHelper.vue';
import TmTabs from 't/basic/tabs';
import TMenu from 't/basic/menu';

import {
  QTabPanel
} from '@teld/q-components';
// import  TCarousel  from 't/basic/carousel/Carousel';
// import  TCarouselSlide  from '@teld/q-components/CarouselSlide/CarouselSlide';
import { QCarouselSlide as TCarouselSlide, QCarousel as TCarousel } from '@teld/q-components/Carousel';
import TScrollArea from 't/basic/scroll-area';
function CheckInParamsIsBind(portlet, item) {
  let returnValue = false;
  let selectWidget = Widget[portlet.InstanceCode];
  if (
    selectWidget &&
    selectWidget.options &&
    selectWidget.options.inParams &&
    selectWidget.options.inParams.find
  ) {
    let param = selectWidget.options.inParams.find(
      findItem => findItem.Code === item.Code,
    );

    returnValue =
      param &&
      typeof param.Value === 'string' &&
      param.Value.indexOf('.') != -1;
  }
  return returnValue;
}

export { CheckInParamsIsBind };

export default {
  mixins: [MixinsPortal],
  data() {
    return {
      slide: 1,
      themeName: '',
      isSearch: false,
      categories: [],
      portalList: {},
      isLoadPortlets: false,
      portletsPreviewUrl: '',
      visiblePortletsPreview: false,
      defaultImg: 'https://resource.teld.cn/fas/defaultPortletImg.png',
      pageIndex: 1,
      pageSize: 10,
      filterKey: '',
      topicLayerCode: '',
      hotList: [],
      newList: [],
      choiseTheme: false,
      activeName: 0,
      checkList: [],
      toolsbarHeight: '20px',
      toolsbarBackgroundColor: '#F0F8FF',
      isShowTitle: false,
      portalSelectLoading: false,
      Terms: Terms,
      activeNames: ['1', '2', '3'],
      isEdit: false,
      portletName: '',
      isShowToolsbar: false,
      isShowRefreshButton: false,
      isAutoRefresh: false,
      refreshInterval: 3000,
      inParams: [],
      selectPortlet: {
        label: 'Empty',
        text: '占位区块',
      },
      baseFormData: {
        material: 1,
      },
      comFormData: {
        name: 1000,
      },
      dialogVisible: false,
      title: Terms.addPortal.title,
      loading: false,
      condition: '',
      selectedRow: null,
      returnType: '',
      projectID: '',
      tableData: [],
      expandIds: [],
      buttonAttributes: {
        class: 'customColor',
      },
      sureButtonOptions: {
        icon: 'check',
        text: '确定',
        type: 'default',
        elementAttr: this.buttonAttributes,
        onClick: () => {
          //            this.dialogVisible = false;
          this.sureData();
        },
      },
      closeButtonOptions: {
        icon: 'close',
        text: '取消',
        onClick: () => {
          this.dialogVisible = false;
        },
      },
      topcloseButtonOptions: {
        icon: 'close',
        stylingMode: 'text',
        onClick: () => {
          this.dialogVisible = false;
        },
      },
      showDialog: true,
      isNotInit: true,
      choiseIcatorPortletVisible: false,
      Title:''
    };
  },
  props: {
    args: {
      type: Object,
    },
  },
  components: {
    TDialog,
    PortletsHelper,
    TreeHelper,
    TButton,
    TCarousel,
    TCarouselSlide,
    TScrollArea,
    TmTabs,
    TMenu,
    QTabPanel,
  },
  computed: {
    ComputedTotal() {
      let total = 0;
      this.categories.forEach(item => {
        total += item.Total;
      });
      return total;
    },
    computedIsMetrics() {
      return this.checkList.some(item => item.PortletCategory == 'metrics')
    }
  },
  mounted() {
    // this.init();
  },

  methods: {
    setTitle(e){
      !this.Title&&(this.Title=e)
    },
    ScrollChange(e) {
      const bottomDis =
        e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomDis < 40 && !this.PortletMetadatasLoadFinshed) {

        this.pageIndex++;
        this.getPortletMetadatas();
      }
    },
    QueryData() {
      return new Promise(resole => {
        window.getDataSync(
          window.FrameSGHost + 'BaseService-GetSFPBusinessTopics',
          'POST',
          {
            businessDimension: 1,
          },
          data => {
            this.lang = Funcs.GetI18NColumnCode(
              TFF.common.storage.Cookie.read('teld_locale'),
            );
            data.data.forEach(item => {
              if (this.lang && item['Name_' + this.lang]) {
                item.Name = item['Name_' + this.lang];
              }
            });
            data.data.unshift({
              ID: '',
              Creator: '',
              CreatorName: '',
              CreateTime: '',
              LastModifier: '',
              LastModifierName: '',
              LastModifyTime: '',
              Code: '',
              Name: this.Terms.portalList.all,
              Name_Lang1: this.Terms.portalList.all,
              Name_Lang2: this.Terms.portalList.all,
              Name_Lang3: this.Terms.portalList.all,
              TopicID: '',
              ParentID: '0',
              TenantID: '',
              Ext1: '',
              Ext2: '',
              Ext3: '',
              Description: '',
              LayerCode: '',
              SortOrder: '',
            });
            resole(data.data);
          },
          function () { },
        );
      });
    },
    categoriesClick(target) {
      if (!target) {
        // this.Categories = '';
        if (this.Categories && this.categories.every(i => this.Categories.some(jj => jj == i.Code))) return
        this.Categories = this.categories.map(item => item.Code)
      } else {
        if (!this.Categories) this.Categories = [];
        if (this.Categories.some(item => item == target.Code)) {
          this.Categories = this.Categories.filter(item => item != target.Code);
        } else {
          this.Categories.push(target.Code);
        }
      }
      this.pageIndex = 1;
      this.PortletMetadatasLoadFinshed = false;
      this.getPortletMetadatas();
    },
    preview(selectedRow) {

      this.PortletsPreview = `${selectedRow.Thumbnail}`;
      this.visiblePortletsPreview = true;
      this.$nextTick(() => {
        this.isLoadPortlets = true;
        this.PortletsPreviewLoaded(selectedRow);
      });
    },
    async PortletsPreviewLoaded(selectedRow) {
      let self = this;
      let iframe = document.querySelector('#PortletsPreview');
      // let assemblyInstance =
      //   await repreparePageContentForPortal(
      //     selectedRow.MetaDataID,
      //     true,
      //     selectedRow.Code,
      //     false,
      //     '',
      //   );
      // // debugger
      iframe.setAttribute('src', this.PortletsPreview)
      let PortletPageSize = JSON.parse(selectedRow.PorletPageSize);
      let _x = 2;
      let _y = 2;
      if (
        PortletPageSize
      ) {
        _x = parseInt(PortletPageSize.width);
        _y = parseInt(PortletPageSize.height);
      }

      iframe.style.height = _y * 40 + 'px';
      iframe.style.width = (document.body.offsetWidth / 24) * _x + 'px';
      iframe.style.opacity = 1
      iframe.onload = function () {
        self.isLoadPortlets = false;
      };

      return;
    },

    async init() {
      this.lang = Funcs.GetI18NColumnCode(
        TFF.common.storage.Cookie.read('teld_locale'),
      );
      this.hotList = await this.getHottestMetadatas();
      if (this.hotList.length % 2 != 0) {
        this.hotList.pop()
      }
      this.newList = await this.getLatestMetadatas();
      if (this.newList.length % 2 != 0) {
        this.newList.pop()
      }
      this.categories = await this.getCategories();
      //this.portalList =
      await this.getPortletMetadatas();
      this.hotList = this.hotList.slice(0);
      this.newList = this.newList.slice(0);
      // this.portalList = this.portalList.slice(0)
    },
    //获取分类
    getCategories() {
      let sgUrl =
        window.FrameSGHost +
        'FASR-DQExecute' +
        '&dqId=0c232ee4-a219-4ccf-a216-8b113818d62b&fasdevappid=fascommon';
        let sgParamList=[
              { isCodeOut: 1, ParameterName: 'DefaultInputFilter', ParameterValue: '', },
            ]
      return new Promise(resolve => {
        window.getDataSync(
          sgUrl,
          'POST',
          {
            parameters:window.Funcs?.Aes256EncryptParams?window.Funcs.Aes256EncryptParams( JSON.stringify(sgParamList)) :JSON.stringify(sgParamList) 

            
         
          },
          data => {
            // if(data.data.List){
            //   data.data.List=data.data.List.filter(item=>item.Code!='006006')
            // }
            if (data.data.List && this.lang) {
              data.data.List.forEach(item => {
                if (item['Name_' + this.lang]) {
                  item.Name = item['Name_' + this.lang];
                }
              });
            }
            resolve(data.data.List);
          },
          function () { },
        );
      });
    },

    // 获取最新小部件
    getLatestMetadatas() {
      return new Promise(resolve => {
        window.getDataSync(

          window.FrameSGHost + 'FASR-GetLatestMetadatas&fasdevappid=fascommon',

          'POST',
          { filter: '{"SourceTypes":[2,3]}' },
          data => {
            data.data = this.fixedThumbnail(data.data);

            resolve(data.data);
          },
          function () { },
        );
      });
    },
    //  获取热门小部件
    getHottestMetadatas() {
      return new Promise(resolve => {
        window.getDataSync(
          Funcs.FasRequestTagAdd(
            window.FrameSGHost + 'FASR-GetHottestMetadatas&fasdevappid=fascommon',
          ),
          'POST',
          { filter: '{"SourceTypes":[2,3]}' },
          data => {
            data.data = this.fixedThumbnail(data.data);
            resolve(data.data);
          },
          function () { },
        );
      });
    },
    // 获取小部件列表
    getPortletMetadatas() {
      if (this.pageIndex == 1) {
        this.portalList = {};
      }
      return new Promise(resolve => {
        window.getDataSync(
          //Funcs.FasRequestTagAdd(
          window.FrameSGHost + 'FASR-GetPortletMetadatas&fasdevappid=fascommon',
          'POST',
          {
            filter: JSON.stringify({
              TopicLayerCode: this.topicLayerCode,
              FilterKey: this.filterKey
                ? this.filterKey.trim()
                : this.filterKey,
              SourceTypes: [2, 3],
              Categories: this.Categories,
              PageIndex: this.pageIndex,
              PageSize: this.pageSize,
            }),
          },
          data => {
            if (!this.portalList) {
              this.portalList = {};
            }

            data.data.rows = this.fixedThumbnail(data.data.rows);
            if (data.data.rows.length < 10) {
              this.PortletMetadatasLoadFinshed = true;
            }
            data.data.rows.forEach(element => {
              if (!this.portalList[element.TopTopicName]) {
                this.portalList[element.TopTopicName] = [];
              }
              this.portalList[element.TopTopicName].push(element);
            });
            this.portalList = Object.assign({}, this.portalList);
            resolve(this.portalList);
          },
          function () { },
        );
      });
    },
    fixedThumbnail(List) {
      if (!List || !List.slice) return [];
      return List.map(item => {
        console.log(this.lang, item, item['Name_' + this.lang]);
        if (this.lang && item['Name_' + this.lang]) {
          item.Name = item['Name_' + this.lang];
        }
        item.Thumbnail = item.Thumbnail
          ? window.TeldWebConfig.ResourceURL + '/' + item.Thumbnail
          : '';
        return item;
      });
    },
    handleClose() { },
    confirmChoiseTheme(target) {
      this.pageIndex=1
      this.themeName = target.Name;
      this.topicLayerCode = target.LayerCode;
      this.getPortletMetadatas();
      this.choiseTheme = false
      this.PortletMetadatasLoadFinshed = false
    },
    handleClick() { },
    checkProtle(target) {
      if (this.checkList.some(jj => jj.ID == target.ID)) {
        this.checkList = this.checkList.filter(jj => jj.ID != target.ID);
        return;
      }
      //只能多选 临时添加
      this.checkList = []
      //影响元数据问题处理
      this.checkList.push(_.cloneDeep(target));
      if (LocalVars.Logs) {
        LocalVars.Logs.push(_.cloneDeep(this.checkList))
      }
    },
    checkInParamsIsBind(item) {
      return CheckInParamsIsBind(this.selectedRow, item);
    },
    drawerOpend() {
      debugger;
      this.inParamsSetting(this.selectedRow, '1');
    },
    async portletsHelperSureData(item) {
      this.portalSelectLoading = true;
      let selectPortlet = item;
      return selectPortlet;
    },
    handleOpenSelector() {
      if (this.isEdit) return;
      this.$refs.portletsHelper.open();
    },
    setPageStatus() {
      debugger;
      this.selectPortlet = {
        label: this.selectedRow.options.target.Name,
        text: Terms.addPortal.portlet,
        img: this.selectedRow.options.Thumbnail,
      };
      if (this.selectedRow.options.hasOwnProperty('Thumbnail') == false) {
        let Thumbnail = this.selectedRow.ucPageMetadata.Header.Thumbnail;
        this.selectPortlet.img = Thumbnail
          ? window.TeldWebConfig.ResourceURL + '/' + Thumbnail
          : 'https://resource.teld.cn/fas/defaultPortletImg.png';
      }
      this.portletName = this.selectedRow.options.title
        ? this.selectedRow.options.title
        : this.selectedRow.options.target.Name;
      this.inParams = this.selectedRow.options.inParams;

      this.isShowToolsbar = this.selectedRow.options.isShowToolsbar;
      this.isShowRefreshButton = this.selectedRow.options.isShowRefreshButton;
      this.isAutoRefresh = this.selectedRow.options.isAutoRefresh;
      this.refreshInterval = this.selectedRow.options.refreshInterval;
      this.toolsbarHeight = this.selectedRow.options.toolsbarHeight || '20px';
      this.toolsbarBackgroundColor =
        this.selectedRow.options.toolsbarBackgroundColor || '#F0F8FF';
      this.isShowTitle = this.selectedRow.options.isShowTitle;
    },
    open: async function (cus) {
      this.checkList = [];
      this.selectedRow = cus;
      debugger;
      this.condition = '';
      if (this.selectedRow) {
        this.isEdit = true;
        this.setPageStatus();
        debugger;
        this.title = Terms.addPortal.editTitle; //'编辑部件-' + this.selectPortlet.label
      } else {
        this.isEdit = false;
        this.selectPortlet = {
          label: 'Empty',
          text: Terms.addPortal.portlet,
        };
        this.portletName = '';
        this.inParams = [];
        this.isShowToolsbar = false;
        this.isShowRefreshButton = false;
        this.isAutoRefresh = false;
        this.refreshInterval = 3000;
        this.toolsbarHeight = '20px';
        this.toolsbarBackgroundColor = '#F0F8FF';
        this.isShowTitle = false;
        this.title = Terms.addPortal.title;
      }
      this.dialogVisible = true;
      this.Title=''
    },

    sureData: async function () {
      if (!this.checkList||!this.checkList.length) {
        Funcs.Notify(
          Terms.message.warn,
          Terms.message.addPortalWarnMessage,
          'warning',
        );
        return;
      }

      // &&this.checkList[0].PortletCategory=='metrics' 暂时不进行类型判断
      if (this.checkList[0].Variables && this.checkList[0].PortletCategory == 'metrics') {
        let MetricsConfig = this.$refs.UI_MetricsSet.getMetricsConfig()
        let StaticMetricsFilter = this.$refs.UI_MetricsSet.getStaticMetricsFilters()
        if (MetricsConfig) {
          MetricsConfig.MainTitle = this.Title
          this.checkList[0].Title=this.checkList[0].Name=this.Title
          if (!MetricsConfig.MetricsMetadatas||MetricsConfig.MetricsMetadatas.length == 0) {
            return 
          }
        } else {
          return 
        }
        this.checkList[0].Variables.forEach(item => {
          if (item.Code == 'StaticMetricsFilters') {
            item.DefaultValue = JSON.stringify(StaticMetricsFilter)
          } else if (item.Code == 'MetricsConfig') {
            item.DefaultValue = JSON.stringify(MetricsConfig)
          }
        })
      }
      //获取元数据
      let PromiseList = [];
      this.checkList.forEach(item => {
        //PromiseList.push(this.portletsHelperSureData(item));
        PromiseList.push(item);
      });
      let res = await Promise.all(PromiseList);
      if (!res) return;
      debugger;
      this.$emit('sureData', {
        isEdit: this.isEdit,
        data: res,
      });
      this.dialogVisible = false;
      this.choiseIcatorPortletVisible = false
    },
    handleCurrentChange: function (val) {
      console.log(val);
      this.selectedRow = val;
    },
  },
  watch: {
    dialogVisible(val) {
      if (val && this.isNotInit) {
        this.isNotInit = false
        this.init();
      }
    },
    filterKey(val) {
      this.pageIndex = 1;
      this.PortletMetadatasLoadFinshed = false;
      if (!val) {
        this.isSearch = false;

        this.getPortletMetadatas();
        return;
      }
      this.isSearch = true;
      this.getPortletMetadatas();
    },
  },
};
</script>
<style>
.t-dialog__open .t-dialog.rtl {
  max-width: 100% !important;
}

.PortletDxPopup .dx-popup-title.dx-toolbar {
  background: #fff !important;
}

.PortletDxPopup .dx-popup-title.dx-toolbar .dx-toolbar-items-container {
  height: 18px;
}

.PortletDxPopup .dx-popup-title.dx-toolbar .dx-toolbar-label {
  font-size: 16px;
}

.PortletDxPopup .dx-button-has-icon .dx-button-content {
  padding: 4px;
}

.PortletDxPopup .dx-button-has-icon .dx-icon {
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
}

.recommend .t-carousel__button {
  background: #d9d9d9;
}

.recommend .q-carousel__navigation-icon--active {
  color: var(--t-color);
}

.recommend .q-carousel__slide,
.recommend .q-carousel .q-carousel--padding {
  padding: 0px !important;
  display: flex;
  gap: 8px;
  cursor: pointer;
}

.recommend .q-carousel__arrow .q-icon {
  color: #fff;
  line-height: 28px;
  font-size: 28px;
}

.recommend .q-carousel__navigation--bottom {
  bottom: -4px;
}

.recommend .q-carousel__arrow .q-btn {
  background: #f0f2f5;
  display: none;
}

.recommend:hover .q-carousel__arrow .q-btn {
  display: block;
}

.recommend .t-carousel__indicator.is-active button {
  background: var(--t-color);
}

.recommend .el-tabs__item {
  font-size: 16px;
}

.recommend_portlet {
  width: 48%;
  /* box-shadow: 1px 1px 6px rgba(0,0,0,.32); */
  height: 250px;
  padding-top: 0px;
  border: 1px solid #f0f2f5;
  position: relative;
  padding: 10px;
}

.recommend_portlet .title {
  font-size: 14px !important;
  text-align: center;
  padding: 0;
}

.recommend_portlet .subTitle {
  font-size: 12px !important;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(0, 0, 0, .56);
}

.recommend_portlet .des {
  font-size: 12px;
  color: rgba(0,0,0,.56);
}

.recommend_portlet .thumbnail {
  height: 68px;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  padding-top: 0px;
  margin-top: 6px;
}

.recommend_portlet .thumbnail {
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.32);
}

.recommend_portlet .view {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: none;
}

.recommend_portlet .thumbnail img {
  width: 100%;
  height: auto;
}

.recommend .div__body {
  padding: 10px;
  height: 100%;
}

.recommend .t-carousel__item {
  display: flex;
  justify-content: space-between;
}

.recommend .div:hover,
.recommend .div.ischecked {
  background: #f0f2f5;
  /* border: 1px solid var(--t-color-hover); */
  cursor: pointer;
}

.recommend .div:hover .view {
  display: block;
  color: var(--t-color);
}

.recommend {
  border-bottom: 1px solid #e8e8e8;
}

.el-dialog__wrapper>.el-loading-mask .el-loading-spinner .el-loading-text,
.el-dialog__wrapper>.el-loading-mask .el-loading-spinner i {
  color: #fff;
}

input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.32) !important;
}
</style>
<style lang="scss">
.RtAddPortletHelper {
  font-size: 14px;
  // p {
  //     margin: 0 !important;
  //     padding: 0 !important;
  // }
  color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));

  .header {
    p {
      margin: 0;
      padding: 0;
    }
    .title{
      font-size:16px !important;
    }
  }

  .q-dialog__inner {
    background: #fff;
  }

  .q-dialog__inner>div {
    box-shadow: 0 0 0 0;
  }

  // .tags >>> .el-popper[x-placement^='bottom'] {
  //   max-width: 100%;
  // }

  .title {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 超出几行省略 */
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
  }

  .des {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 超出几行省略 */
    overflow: hidden;
    font-size: 12px;
    color: rgba(0, 0, 0, .56);
  }

  .portalList {
    header {
      padding: 0 20px;
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      display: flex;
      align-items: center;

      p {
        margin: 0;
        padding: 0;
      }
    }

    .portalGroup {
      padding-top: 10px;

      .view {
        position: absolute;
        top: 16px;
        right: 22px;
        font-size: 14px;
        display: none;
      }

      .title {
        padding: 10px 20px 0px;
        font-size: 14px;
        color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
        -webkit-line-clamp: 1;
        width: 80%;
        // display: inline-block;
      }

      .portal:hover {
        // border: 1px solid var(--t-color-hover);
        background: #f0f2f5;

        .view {
          display: block;
          color: var(--t-color);
        }
      }

      .ischecked {
        // border: 1px solid var(--t-color-hover) !important;
        background: #f0f2f5;
      }

      .portal {
        position: relative;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-bottom: 1px solid #e8e8e8;
        padding: 16px 20px 16px 20px;
        display: flex;
        justify-content: space-between;
        margin: 0 1px;
        cursor: pointer;

        .abbreviation {
          width: 152px;
          height: 100px;
          display: flex;
          align-items: center;
          overflow: hidden;
          border-radius: 2px;
          box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.32);

          img {
            display: inline-block;
            width: 100%;
            min-height: 100%;
            height: auto;
          }
        }

        .content {
          width: calc(100% - 162px);
          margin-left: 10px;

          .title {
            color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
            line-height: 24px;
            font-size: 14px;
          }

          p {
            margin: 0;
            padding: 0;
          }

          .subTitle {
            height: 24px;
            line-height: 24px;

            span {
              font-size: 12px !important;
              color: rgba(0, 0, 0, 0.56) !important;
              margin-right: 10px;
            }
          }

          .des {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.56);
            line-height: 22px;
          }
        }
      }
    }
  }

  .ischeckIcon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px;
    background-image: linear-gradient(225deg,
        var(--t-color) 20px,
        rgba(0, 0, 0, 0) 20px);
  }

  .ischeckIcon .fas.dx-icon.icon-t-check {
    position: absolute;
    top: 2px;
    right: 2px;
    color: #fff;
  }

  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #f0f2f5;
  }

  .header .operate {
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .header .operate i {
    color: var(--t-color-hover);
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
  }

  .searchs {
    margin: 16px 0 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f0f2f5;
    border-radius: 2px;
  }

  .searchs i {
    margin-left: 13px;
    color: rgba(0, 0, 0, 0.32);
  }

  .searchs input {
    height: 32px;
    background: #f0f2f5;
    width: calc(100% - 40px);
    border: 0;
    outline: 0;
    text-indent: 10px;
  }

  .tags {
    display: flex;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tag {
      min-width: 50px;
      cursor: pointer;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      position: relative;
      padding: 0 14px;
      height: 24px;
      border: 1px solid #e4e4e4;
      border-radius: 2px;
      font-weight: 400;
      text-align: CENTER;
      color: #9c9c9c;
      line-height: 24px;
      font-size: 12px;
      cursor: pointer;

      .count {
        font-size: 12px;
        font-style: normal;
        //   position: absolute;

        //   border-radius: 50%;
        //   height: 30px;
        //   width: 30px;
        //   font-size: 14px;
        //   text-align: center;
        //   line-height: 30px;
        // //   background: #F0F2F5;
        // // color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
        // background: rgba(var(--t-color-rgb), .1);
        //   color: var(--t-color-rgb);
        //   transform: scale(.6);
        //   top: -15px;
        //   right: -14px;
        //   font-style: normal;
        //   font-weight: 600;
      }

      .filterIcon {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 0;
        bottom: 2px;
      }
    }

    .tag.isCheck {
      color: var(--t-color);
      border-color: var(--t-color);
    }

    .tag:hover {
      color: var(--t-color);
      border-color: var(--t-color);
    }

    span {
      cursor: pointer;
    }

    .isCheck {
      color: var(--t-color);
    }

    span:hover {
      color: var(--t-color-hover);
      border-color: var(--t-color);

      .count {
        // background: rgba(var(--t-color-rgb), .1);
        color: var(--t-color-rgb);
      }

    }
  }

  .recommend {
    // margin-top: 12px;
    padding: 0 20px;
  }

  .isvisiable {
    display: none;
  }
}

.t-menu.RtAddPortletHelper {
  right: 5px;
  left: auto !important;
  max-width: 390px !important;
}

.t-menu.RtAddPortletHelper .tags {
  padding: 10px;
}

.t-menu.RtAddPortletHelper .tags .tag {
  width: auto;
}
</style>
